<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            .Container {
                width: 450px;
                height: 287px;
                border: 1px solid #000;
                position: relative;
                margin: 0 auto;
                overflow: hidden;
            }
            .imgContainer {
                width: 2300px;
                height: 287px;
                position: absolute;
                left: 0px;
            }
            .imgContainer img {
                float: left;
            }
            .dot {
                width: 450px;
                height: 20px;
                position: absolute;
                bottom: 10px;
                z-index: 2;
                display: flex;
                justify-content: center;
            }
            .dot span {
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background-color: yellowgreen;
                margin: 5px;
            }
        </style>
    </head>
    <body>
        <div class="Container">
            <div class="dot">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div class="imgContainer">
                <img src="img/10.jpg" alt="" />
                <img src="img/20.jpg" alt="" />
                <img src="img/21.jpg" alt="" />
                <img src="img/32.jpg" alt="" />
                <img src="img/9.jpg" alt="" />
            </div>
        </div>
    </body>
</html>
<script>
    var imgContainerEle = document.querySelector(".imgContainer");
    var dotEle = document.querySelector(".dot span");
    // document.onclick = function(){
    //     move(imgContainerEle,"left",-520,function(){
    //         console.log("运动完成");
    //     })
    // }
    var page = 1;
    setInterval(function () {
        move(imgContainerEle, "left", -450 * page, function () {
            page++;
            console.log(page);
            if (page == 6) {
                page = 1;
                imgContainerEle.style.left = "0px";
            }
        });
    }, 2000);

    function autoPlay() {
        var timer = setInterval(function () {
            move(imgContainerEle, "left", -450 * page - 450, function () {
                page++;
                console.log(page);
                if (page == 6) {
                    page = 1;
                    imgContainerEle.style.left = "-450px";
                }
                changeDot();
            });
        }, 2000);

        //改变点的位置
        function changeDot() {
            dotEle.forEach(function (item) {
                item.style.background = "white";
            });
        }
        changeDot();
        // 当鼠标移入的时候 停止自动轮播 当鼠标离开的时候 又需要自动轮播
        containerEle.onmouseenter = function () {
            console.log("enter");
            // 停止轮播
            clearInterval(timer);
        };
        containerEle.onmouseleave = function () {
            console.log("leave");
            autoPlay();
        };
    }
    autoPlay();
      
    // 复制第一张图到最后一张图的后面
    function cloneImg() {
        imgContainerEle.style.width = "2750px";
        // 获取第一张图片
        var fImg = imgContainerEle.firstElementChild;
        // 复制一份第一张图片
        var fCopyImg = fImg.cloneNode(true);

        // 把复制的图片放在第五张后面；
        imgContainerEle.appendChild(fCopyImg);
    }

    cloneImg();

    function move(boxEle, dir, dis, cb) {
        function fn() {
            var num = parseInt(getComputedStyle(boxEle)[dir]);
            var res = dis > num ? 1 : -1;
            var speed = 10 * res;
            boxEle.style[dir] = num + speed + "px";
            if (num + speed == dis) {
                // Math.abs( (num +speed)-dis)<5;
                cb && cb();
            } else {
                window.requestAnimationFrame(fn);
            }
        }
        fn();
    }
</script>
